﻿@{
    var addtocart = Url.RouteUrl("AddProductDetails");
    var updateitemcart = Url.RouteUrl("UpdateItemCart");
}
<template v-if="PopupQuickViewVueModal.AddToCart.UpdatedShoppingCartItemId !== null">
    <input type="hidden" id="shoppingCartItemId" name="shoppingCartItemId" :value="UpdatedShoppingCartItemId"/>
</template>
<template v-if="PopupQuickViewVueModal.AddToCart.EnteredPrice">
    <div class="customer-entered-price mb-3 d-flex w-100 flex-column">
        <div class="price-input">
            <label :for="'addtocart_' + PopupQuickViewVueModal.AddToCart.ProductId + '_CustomerEnteredPrice'" class="enter-price-label">@Loc["Products.EnterProductPrice"]</label>
            <input :id="'addtocart_' + PopupQuickViewVueModal.AddToCart.ProductId + '_CustomerEnteredPrice'" :name="'CustomerEnteredPrice'" type="text" :value="PopupQuickViewVueModal.AddToCart.CustomerEnteredPrice" class="form-control enter-price-input"/>
        </div>
        <div class="price-range pt-1">
            {{PopupQuickViewVueModal.AddToCart.CustomerEnteredPriceRange}}
        </div>
    </div>
</template>
<div role="group" class="input-group product-add-to-cart flex-nowrap">
    <template v-if="!PopupQuickViewVueModal.AddToCart.DisableBuyButton || PopupQuickViewVueModal.AddToCart.EnteredPrice">
        <template v-if="PopupQuickViewVueModal.AddToCart.MinimumQuantityNotification !== null">
            <div class="min-qty-notification text-danger w-100 mb-2">{{PopupQuickViewVueModal.AddToCart.MinimumQuantityNotification}}</div>
        </template>
    </template>
    <template v-if="!PopupQuickViewVueModal.AddToCart.DisableBuyButton">
        <template v-if="PopupQuickViewVueModal.AddToCart.AllowedQuantities.length > 0">
            <select :id="'addtocart_' + PopupQuickViewVueModal.AddToCart.ProductId + '_EnteredQuantity'" :name="'EnteredQuantity'" class="custom-select form-control qty-dropdown mr-2">
                <template v-for="option in PopupQuickViewVueModal.AddToCart.AllowedQuantities">
                    <option :value="option.Value" :disabled="option.Disabled" :selected="option.Selected">{{option.Text}}</option>
                </template>
            </select>
        </template>
        <template v-else>
            <label :for="'addtocart_' + PopupQuickViewVueModal.AddToCart.ProductId + '_EnteredQuantity'" class="sr-only">@Loc["ShoppingCart.AddToCart"]</label>
            <div class="qty-controls">
                <div class="plus" @@click="vm.$refs.qtyqv.value ++"></div>
                <div class="minus" @@click="vm.$refs.qtyqv.value --"></div>
            </div>
            <input ref="qtyqv" :value="PopupQuickViewVueModal.AddToCart.EnteredQuantity" :id="'addtocart_' + PopupQuickViewVueModal.AddToCart.ProductId + '_EnteredQuantity'" :name="'EnteredQuantity'" min="1" class="qty-input form-control text-center" type="number" inputmode="numeric"/>
            <template v-if="PopupQuickViewVueModal.AddToCart.MeasureUnit !== ''">
                <span class="qty-unit d-flex align-items-center mr-2">
                    {{PopupQuickViewVueModal.AddToCart.MeasureUnit}}
                </span>
            </template>
        </template>
        <div class="input-group-append w-100">
            <template v-if="typeof vmwishlist !== 'undefined' && PopupQuickViewVueModal.AddToCart.UpdatedShoppingCartItemId !== null">
                <button :id="'add-to-wishlist-button-' + PopupQuickViewVueModal.AddToCart.ProductId" class="btn btn-info add-to-cart-button d-inline-flex" title="@Loc[" ShoppingCart.AddToWishlist.Update"]" :data-productid="PopupQuickViewVueModal.AddToCart.ProductId" :onclick="'AxiosCart.updateitem(`@updateitemcart`, `#product-details-form`);return false;'" v-b-tooltip.hover.bottom>
                    <span>
                        @Loc["ShoppingCart.AddToWishlist.Update"]
                    </span>
                </button>
            </template>
            <template v-else>
                <button type="button" :id="'add-to-cart-button-' + PopupQuickViewVueModal.AddToCart.ProductId" class="btn btn-info add-to-cart-button d-inline-flex"
                        data-productid="PopupQuickViewVueModal.AddToCart.ProductId" :onclick="PopupQuickViewVueModal.AddToCart.UpdatedShoppingCartItemId !== null ?
                                'AxiosCart.updateitem(`@updateitemcart`, `#product-details-form`);return false;' :
                                'AxiosCart.addproducttocart_details(`@addtocart/' + PopupQuickViewVueModal.AddToCart.ProductId + '/1`, `#product-details-form`);return false;'">
                    <span>
                        <template v-if="PopupQuickViewVueModal.AddToCart.IsAuction">
                            @Loc["ShoppingCart.BuyNow"]
                        </template>
                        <template v-else-if="PopupQuickViewVueModal.AddToCart.IsReservation">
                            @Loc["ShoppingCart.Reservation"]
                        </template>
                        <template v-else-if="PopupQuickViewVueModal.AddToCart.AvailableForPreOrder">
                            @Loc["ShoppingCart.PreOrder"]
                        </template>
                        <template v-else-if="PopupQuickViewVueModal.AddToCart.UpdateShoppingCartItemType !== null">
                            @Loc["ShoppingCart.AddToCart.Update"]
                        </template>
                        <template v-else>
                            @Loc["ShoppingCart.AddToCart"]
                        </template>
                    </span>
                </button>
            </template>
        </div>
    </template>
</div>